<!DOCTYPE html>
<html>
<head>
    <title>Virtual Touchpad</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/touchpad.css">
    <script src="js/lib/jquery.js"></script>
    <script src="js/lib/socketio.js"></script>
    <script type="text/javascript" src="/js/lib/joystick.js"></script>
    <script type="text/javascript" src="/js/virtual_touchpad_client.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"
          content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" sizes="57x57" href="/images/touchpad_icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/images/touchpad_icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/images/touchpad_icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/images/touchpad_icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/touchpad_icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/images/touchpad_icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/images/touchpad_icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/touchpad_icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/touchpad_icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/images/touchpad_icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/touchpad_icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/images/touchpad_icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/touchpad_icons/favicon-16x16.png">
    <link rel="manifest" href="/images/touchpad_icons/manifest.json">
    <meta name="msapplication-TileColor" content="#4c4c4c">
    <meta name="msapplication-TileImage" content="/images/touchpad_icons/ms-icon-144x144.png">
    <meta name="theme-color" content="#4c4c4c">
</head>
<body onload="app.init();">
<menu style="display:none">
    <button id="setTouchpad">touchpad</button>
    <button id="setJoystick">joystick</button>
    <button id="goFullscreen">fullscreen</button>
</menu>
<span id="settings-gear">
    <svg version="1.1" id="gear-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="280px" height="279.416px" viewBox="340 140 280 279.416" enable-background="new 340 140 280 279.416"
         xml:space="preserve">
        <path d="M620,305.666v-51.333l-31.5-5.25c-2.333-8.75-5.833-16.917-9.917-23.917L597.25,199.5l-36.167-36.75l-26.25,18.083
            c-7.583-4.083-15.75-7.583-23.916-9.917L505.667,140h-51.334l-5.25,31.5c-8.75,2.333-16.333,5.833-23.916,9.916L399.5,163.333
            L362.75,199.5l18.667,25.666c-4.083,7.584-7.583,15.75-9.917,24.5l-31.5,4.667v51.333l31.5,5.25
            c2.333,8.75,5.833,16.334,9.917,23.917l-18.667,26.25l36.167,36.167l26.25-18.667c7.583,4.083,15.75,7.583,24.5,9.917l5.25,30.916
            h51.333l5.25-31.5c8.167-2.333,16.333-5.833,23.917-9.916l26.25,18.666l36.166-36.166l-18.666-26.25
            c4.083-7.584,7.583-15.167,9.916-23.917L620,305.666z M480,333.666c-29.75,0-53.667-23.916-53.667-53.666s24.5-53.667,53.667-53.667
            S533.667,250.25,533.667,280S509.75,333.666,480,333.666z" />
    </svg>
</span>
<section id="touchpad" style="display:block">
    <div id="touchpad-area"></div>
    <div id="touchpad-btn_left"></div>
    <div id="touchpad-btn_right"></div>
</section>
<section id="joystick" style="display:none"></section>
<div id="connecting">
    <span>connecting...</span>
</div>

<div id="settings-modal" class="modal-wrapper closed">
    <div class="modal">
        <div class="close"></div>
        <form id="settings-form">
            <h1>Settings</h1>
            <hr />
            <div class="form-row">
                <label for="settings-speed">Speed</label>
                <div class="nested">
                    <input type="range" name="speed" id="settings-speed" step="0.1" min="0.1" max="5" />
                    <br />
                    <small class="explain center">
                        <output id="settings-speed-output"></output>
                    </small>
                </div>
            </div>
            <div class="form-row">
                <label for="settings-acceleration">Acceleration</label>
                <div class="nested">
                    <input type="range" name="acceleration" id="settings-acceleration" step="0.1" min="1" max="2.5" />
                    <br />
                    <small class="explain center">
                        <output id="settings-acceleration-output"></output>
                    </small>
                </div>
            </div>
            <button>Save</button>
        </form>
    </div>
</div>
</body>
</html>
